<template>
  <div class='page' @touchstart="blur">

  <div class="container perf-set-pdb" :style="containerHeight">
    <group>
      <x-input v-for="(item, key) in inputGroupList" :key="key"
      :placeholder="!!!$route.query.edit ? '0' : item.placeholder"
      type='number'
      text-align="right"
      :disabled="!!!$route.query.edit"
      :icon-type="item.iconType"
      :show-clear="true" @on-blur="onBlur"
      @on-focus="onFocus"
      v-model="item.value"
      @input="input"  placeholder-align="left">
        <label class="weui-label" slot="label" style="width:11em;" @click="blur">{{ item.title }}</label>
      </x-input>
    </group>

    <button v-if="!!$route.query.edit" class="scrm-default-btn small mgt-25" @click="submit">提交</button>
  </div>
  <crm-tabbar v-if="!isAppMode" ></crm-tabbar>
  <x-dialog v-model="this.$store.state.app.dialogShow">
    <div class="dialog-message">
      {{ this.$store.state.app.dialogMessage }}
    </div>
    <span class="vux-close" @click="hideDialog">知道了</span>
  </x-dialog>
  </div>
</template>

<script>
// import Vue from 'vue'
import crmTabbar from '../components/crm-tabbar'

// import Scroller from 'vue-scroller'
// import {Group, XInput, XButton} from 'vux'
import XInput from 'vux/src/components/x-input'
import Group from 'vux/src/components/group'
import XButton from 'vux/src/components/x-button'
import XDialog from 'vux/src/components/x-dialog'

// import axios from 'axios'
import store from '../store'
import {
  UPDATE_TARGET
} from '../store/mutation-types';
import {showDialog, hideDialog} from '../lib/dialog'
import { mapState } from 'vuex'
import { mapField } from '../lib/backend'

export default{
    data () {
      let overHeight = document.body.scrollHeight+2;
      let data = {
        activated: true,
        containerHeight : 'min-height:'+overHeight+'px;',
        currentVal: '',
        isfocus : false,
        inputGroupList : [],
        screenWidth: document.body.clientHeight
      };

      return data;
    },
    activated () {
      this.activated = true
    },
    deactivated () {
      this.activated = false
    },
    components: {
      crmTabbar,
      Group,
      XInput,
      XButton,
      // Scroller,
      XDialog
    },
    methods: {
      input(value){
    },

    refresh (iscroll) {
      console.log('refresh')
      // Refresh current data
    },
    hideDialog: hideDialog,
    submit () {
      this.$vux.loading.show({
        text: '保存中...'
      })
      let that = this;

      var dateData = {...this.$route.query};
      var submitData = Object.assign({}, this.filterData)
      var totalTarget = 0;
      if (this.$route.query.type === 'team') {
        dateData['achie_type'] = 'TEA'
        dateData['team_id'] = this.$route.query.team_id
      }

      if (this.$route.query.suid) {
        dateData['suid'] = this.$route.query.suid
      }

      dateData['year'] = new Date().getFullYear();
      this.inputGroupList.forEach(function(obj, index){
        var month = index+1;
        dateData['achie_'+month] = obj.value;
        if(obj.value) totalTarget = parseInt(totalTarget) + parseInt(obj.value);
      });


      store.dispatch('saveWorckbenchInfo', dateData).then((response) =>{
        this.$vux.loading.hide()

        if(response.status === 200 && response.data.errcode === 0) {
          showDialog("保存成功！")
          setTimeout(() => {
            hideDialog()
            that.$router.back();
          }, 2500)
        } else {
          showDialog(response.data.errmsg)
          setTimeout(() => {
            hideDialog()
          }, 2500)
          console.debug('系统出错请联系管理员!', JSON.stringify(response.data));
        }
      })
    },

    initInputGroupList () {

      let date = new Date().getFullYear();
      const query = this.$route.query
      let team_id = query.team_id
      let suid = query.suid
      let year = this.$route.query.year || date

      store.dispatch('getAchievementsInfo', mapField({
        year: year,
        ...query
      }, {
        'year': 'year',
        'suid': 'suid',
        'team_id': 'team_id',
        'type': 'type'
      } )).then(function(response) {
        if (response.status === 200 && response.data.errcode === 0) {
          let res = response.data.results;
          inputGroupList.forEach(function(object, index){
            let month = index+1;
            object.value = res['achie_'+month];
          });

          console.log(JSON.stringify(res))

        } else {
          console.debug('系统出错请联系管理员!', JSON.stringify(response.data));
        }
      });

      let inputGroupList = [];

      for(let i=1; i<=12; i++)  {
        inputGroupList.push({
          key:i,
          title: i+'月份',
          iconType: '',
          placeholder: '输入该月业绩目标',
          value: ''
        })
        let j = i-1;
      }

      this.inputGroupList = inputGroupList;
      console.log('22')
    },

    log () {
      this.blur();
    },

    blur() {

      // var that = this;
      // console.log(this.isIphone(), 'this.isIphone()')
      // if(!this.isIphone()){
      // if(that.isfocus && document.activeElement.tagName === 'INPUT') {
      //
      //   if(that.timeId) clearTimeout(that.timeId);
      //
      //   that.timeId = setTimeout(function () {
      //   document.activeElement.blur();
      //   that.isfocus = false;
      //   }, 200);
      // }
      // }

    },

    isIphone () {
       var u = navigator.userAgent;
       if (u.indexOf('android') > -1){
         return false
       }else{
         return true
       }
     },

    load (iscroll) {
      console.log('load')
      // Load new data
    },

    test () {
      console.log('test')
    },

    onBlur () {
      this.isfocus = false;
    },

    onFocus(value){
      this.isfocus = true;
      console.log(this.isfocus, 'this.isfocus');
    },


    },

    mounted () {
      console.log(this.isIphone(), 'isIphone', this.isAppMode)
      this.initInputGroupList();
      // setTimeout(() => {
      //   this.$refs.my_scroller.resize();
      // }, 300)
      this.callJsApi('biz.navigation.setTitle',{title:'设置业绩目标'});
      console.log(this.inputGroupList)
    },
    computed: {
       ...mapState({
        isAppMode: state => state.config.isAppMode
      }),
    },

    watch:{
      inputGroupList () {
        console.log(this.inputGroupList, JSON.stringify(this.inputGroupList))
      }
    }
 }

</script>

<style lang="less">
  @import "../less/base.less";

  .perf-set-pdb{
    padding-top: 10px;
    padding-bottom: 100px;

    [disabled] {
      background-color: #fff;
    }

    .weui-cells{
      margin-top: 0;

      .weui-label {
        color: #444444;
      }
    }

    .submit-btn{

      width: 90%;
      margin-top: 15px;
      display: block;
      font-size: 16px;
    // color: #23B2E2;
    }
  }
</style>
